<template>
  <view>
    <view class="container form-content">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="120px" labelPosition="top">
        <view class="container">
          <view class="hidden-title">基本信息</view>
          <view class="background-white">
            <view class="flex text bor-btm"
              >点检场所：
              <text>{{ formData.areaName }}</text>
            </view>
            <view class="flex text bor-btm"
              >场所点检内容：
              <text>{{ formData.content }}</text>
            </view>
            <view class="flex text bor-btm" v-if="readOnly"
              >场所点检情况：
              <text>{{ formData.situation }}</text>
            </view>
            <view class="flex text bor-btm" v-if="readOnly"
              >点检结果：
              <text>{{ formData.resultStatusLabel }}</text>
            </view>
          </view>
        </view>
        <view v-if="!readOnly">
          <view class="hidden-title">点检结果</view>
          <view class="background-white">
            <uni-forms-item name="situation" label="场所点检情况">
              <textarea
                v-model="formData.situation"
                class="text-area"
                placeholder="(限1000字)"
                :disabled="readOnly"
                maxlength="1000"
              />
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>
    <view class="submit-group" v-if="!readOnly">
      <button class="u-button" :ripple="true" @click="submit('', 1)">正常</button>
      <button class="u-button u-button-danger" :ripple="true" @click="goMatterReport">上报隐患</button>
    </view>
  </view>
</template>

<script>
import { getAreaBySubTaskItemId, executeItemAreaTask } from '@/api/equipment/spotCheck'
import { cloneDeep } from 'lodash'
// import View from "../../report-form/query/view.vue";
export default {
  // components: {View},
  data() {
    return {
      btnName: '',
      subTaskItemId: '',
      readOnly: false,
      formData: {},
      rules: {
        results: {
          rules: [
            {
              required: true,
              errorMessage: '维护结果不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad({ subTaskItemId, readOnly }) {
    this.subTaskItemId = subTaskItemId
    this.readOnly = readOnly && readOnly !== 'undefined' ? readOnly : false
    this.getDetail()
  },
  onPullDownRefresh() {
    this.getDetail()
  },
  methods: {
    setTitle(title) {
      uni.setNavigationBarTitle({
        title: title
      })
    },
    getDetail() {
      getAreaBySubTaskItemId(this.subTaskItemId).then(({ data }) => {
        this.formData = data
        this.formData.situation = data.situation || (this.readOnly ? '--' : '正常')
      })
    },
    submit(managerId, resultStatus = 1) {
      this.$refs.form.validate().then(async (res) => {
        if (res) {
          const eventChannel = this.getOpenerEventChannel()
          this.formData.managerId = managerId
          this.formData.resultStatus = resultStatus
          await executeItemAreaTask(this.formData)
          this.$modal.msgSuccess('保存成功')
          eventChannel.emit('reloadEvent', true)
          this.navigateBack()
        }
      })
    },
    navigateBack() {
      uni.navigateBack()
    },
    goMatterReport() {
      uni.navigateTo({
        url: `/pages/work/hiddenDangerReport/index?managerSource=4&reportType=1&areaId=${this.formData.areaId}`,
        events: {
          'callback:success': (data) => {
            this.submit('', 2)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }

    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.form-content {
  margin-bottom: 107px;
}

.step-block {
  width: 100%;
  //height: 70px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.step {
  width: 10%;

  .step-no {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid;
    text-align: center;
    line-height: 30px;
  }
}

.step-content {
  width: 85%;
  border: 1px solid;
  border-radius: 5px;
}

.btn-box {
  display: flex;
  justify-content: flex-end;
  padding: 0 10px;
}

.operate-btn {
  height: 25px;
  line-height: 25px;
  border-radius: 3px;
  border: 1px solid;
  padding: 0 5px;
  text-align: center;
  margin: 5px 0;
}
</style>
